<template>
  <a-form ref="formRef" :model="formInfo">
    <a-form-item label="基准竞价：" label-col-flex="100px">
      <span>应用策略时的广告竞价</span>
    </a-form-item>
    <a-form-item label="竞价回调：" label-col-flex="100px">
      <span>生效时间结束后</span>
      <a-radio-group v-model="formInfo.isPolicyCallback">
        <a-radio :value="0">调整回原竞价</a-radio>
        <a-radio :value="2">不回调</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="调整频率：" label-col-flex="100px">
      <a-radio-group v-model="formInfo.adjustFrequencyType">
        <a-radio :value="0">每天</a-radio>
        <a-radio :value="1">每周</a-radio>
      </a-radio-group>
    </a-form-item>
  </a-form>
  <!-- 按日 -->
  <div class="rules-list-w" v-show="formInfo.adjustFrequencyType === 0">
    <ul class="header">
      <li style="width: 250px">站点时间</li>
      <li style="flex: 1">搜索结果顶部(首页)</li>
      <li style="flex: 1">商品页面</li>
      <li style="width: 130px">操作</li>
    </ul>
    <ul class="rules-con">
      <li v-for="(item, i) in policyTemplateTargetingRules" :key="i" class="flex-c role-item">
        <div class="flex-c-c" style="width: 250px">
          <div class="flex-c">
            <a-select v-model="item.startTime" style="width: 100px" size="small" placeholder="开始时间">
              <a-option v-for="date in startDateList" :key="date" :value="date" :label="date" :disabled="item.endTime && date >= item.endTime" />
            </a-select>
            <span style="margin: 0 4px">-</span>
            <a-select v-model="item.endTime" style="width: 100px" size="small" placeholder="结束时间">
              <a-option v-for="date in endDateList" :key="date" :value="date" :label="date" :disabled="item.startTime && date <= item.startTime" />
            </a-select>
          </div>
        </div>
        <div class="flex-c-c" style="flex: 1">
          <span style="margin-right: 4px">调整到</span>
          <a-input-number style="width: 100px" size="small" v-model="item.ruleTargetingTopAmount" placeholder="" />
          <span>%</span>
        </div>
        <div class="flex-c-c" style="flex: 1">
          <span style="margin-right: 4px">调整到</span>
          <a-input-number style="width: 100px" size="small" v-model="item.ruleTargetingProductDetailAmount" placeholder="" />
          <span>%</span>
        </div>
        <div class="flex-c-c" style="width: 130px">
          <a-button style="margin-right: 10px" size="mini" type="outline" :disabled="policyTemplateTargetingRules.length > 23" @click="addDate(i)">
            <template #icon>
              <icon-plus />
            </template>
          </a-button>
          <a-button size="mini" type="outline" :disabled="policyTemplateTargetingRules.length < 2" @click="deleteDate(i)">
            <template #icon>
              <icon-minus />
            </template>
          </a-button>
        </div>
      </li>
    </ul>
  </div>
  <!-- 按周 -->
  <div class="rules-list-w" v-show="formInfo.adjustFrequencyType === 1">
    <ul class="header">
      <li style="width: 80px">日期</li>
      <li style="width: 250px">站点时间</li>
      <li style="flex: 1">搜索结果顶部(首页)</li>
      <li style="flex: 1">商品页面</li>
      <li style="width: 130px">操作</li>
    </ul>
    <ul class="rules-con">
      <li class="role-item flex-c" v-for="(item, i) in budgetRulesByWeek" :key="i">
        <div style="width: 80px; text-align: center">{{ weekMap[item.dayOfWeek] }}</div>
        <ul style="flex: 1">
          <li class="flex-c" style="margin: 5px 0" v-for="(list, j) in item.childs" :key="j">
            <div class="flex-c-c" style="width: 250px">
              <div class="flex-c">
                <a-select v-model="list.startTime" style="width: 100px" size="small" placeholder="开始时间">
                  <a-option v-for="date in startDateList" :key="date" :value="date" :label="date" :disabled="list.endTime && date >= list.endTime" />
                </a-select>
                <span style="margin: 0 4px">-</span>
                <a-select v-model="list.endTime" style="width: 100px" size="small" placeholder="结束时间">
                  <a-option v-for="date in endDateList" :key="date" :value="date" :label="date" :disabled="list.startTime && date <= list.startTime" />
                </a-select>
              </div>
            </div>
            <div class="flex-c-c" style="flex: 1">
              <span style="margin-right: 4px">调整到</span>
              <a-input-number style="width: 100px" size="small" v-model="list.ruleTargetingTopAmount" placeholder="" />
              <span>%</span>
            </div>
            <div class="flex-c-c" style="flex: 1">
              <span style="margin-right: 4px">调整到</span>
              <a-input-number style="width: 100px" size="small" v-model="list.ruleTargetingProductDetailAmount" placeholder="" />
              <span>%</span>
            </div>
            <div class="flex-c-c" style="width: 130px">
              <a-button style="margin-right: 10px" size="mini" type="outline" :disabled="item.childs.length > 23" @click="addDateByWeek(i, j)">
                <template #icon>
                  <icon-plus />
                </template>
              </a-button>
              <a-button size="mini" type="outline" :disabled="item.childs.length < 2" @click="deleteDateByWeek(i, j)">
                <template #icon>
                  <icon-minus />
                </template>
              </a-button>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { Message } from '@arco-design/web-vue'
  onMounted(() => {
    setDefaultData()
  })
  const props = defineProps({
    currentData: {
      type: Object,
      default: () => {},
    },
  })
  const endDateList = ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '23:59']
  const startDateList = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
  const weekMap = {
    MONDAY: '周一',
    TUESDAY: '周二',
    WEDNESDAY: '周三',
    THURSDAY: '周四',
    FRIDAY: '周五',
    SATURDAY: '周六',
    SUNDAY: '周日',
  }
  const defaultBudgetRules = {}
  const budgetRulesByWeek = ref<Array<any>>([])
  const formInfo = ref<any>({})
  const policyTemplateTargetingRules = ref()

  const formRef = ref()
  // 初始化数据
  function setDefaultData() {
    let defaultRule = JSON.parse(JSON.stringify(defaultBudgetRules))
    let currentData = JSON.parse(JSON.stringify(props.currentData))
    if (currentData?.id) {
      //编辑回显
      formInfo.value = {
        adjustFrequencyType: currentData.adjustFrequencyType,
        isPolicyCallback: currentData.isPolicyCallback,
      }
      if (formInfo.value.adjustFrequencyType === 0) {
        policyTemplateTargetingRules.value = currentData.policyTemplateRuleDOS
      } else {
        policyTemplateTargetingRules.value = [defaultRule]
      }
    } else {
      // 初始化
      formInfo.value = {
        adjustFrequencyType: 0,
        isPolicyCallback: 0,
      }
      policyTemplateTargetingRules.value = [defaultRule]
    }
    setBudgetRulesByWeek(currentData)
  }
  // 按周预算策略默认显示数据-编辑
  function setBudgetRulesByWeek(currentData: any) {
    budgetRulesByWeek.value = []
    let oldArr = currentData?.policyTemplateRuleDOS || []
    let dataMap = {}
    oldArr.forEach((el: any) => {
      if (!dataMap[el.dayOfWeek]) {
        dataMap[el.dayOfWeek] = []
      }
      dataMap[el.dayOfWeek].push(el)
    })
    Object.keys(weekMap).forEach((week: any) => {
      budgetRulesByWeek.value.push({
        dayOfWeek: week,
        childs: dataMap[week]?.length ? dataMap[week] : [{ ...defaultBudgetRules, dayOfWeek: week }],
      })
    })
  }
  // 每周
  function addDateByWeek(i: number, j: number) {
    budgetRulesByWeek.value[i].childs.splice(j + 1, 0, { ...defaultBudgetRules, dayOfWeek: budgetRulesByWeek.value[i].dayOfWeek })
  }
  function deleteDateByWeek(i: number, j: number) {
    budgetRulesByWeek.value[i].childs.splice(j, 1)
  }
  // 每天
  function addDate(i: number) {
    policyTemplateTargetingRules.value.splice(i + 1, 0, JSON.parse(JSON.stringify(defaultBudgetRules)))
  }
  function deleteDate(i: number) {
    policyTemplateTargetingRules.value.splice(i, 1)
  }
  // 设置需要保持的规则列表数据,需要区分按日还是按周
  function getRuleListToSave() {
    let budgetRules: Array<any> = []
    if (formInfo.value.adjustFrequencyType === 0) {
      budgetRules = policyTemplateTargetingRules.value
    } else {
      budgetRulesByWeek.value.forEach((el: any) => {
        let arr = el.childs.filter((el: any) => el.startTime && el.endTime)
        budgetRules = [...budgetRules, ...arr]
      })
    }
    return budgetRules
  }
  // 校验信息
  function validateData() {
    let ruleList = getRuleListToSave()
    if (!ruleList.length) {
      Message.error('请最少配置一个策略')
      return false
    }
    // let flag = true
    // ruleList.forEach((el: any) => {
    //   if (!el.startTime || !el.endTime) {
    //     flag = false
    //   }
    // })
    // if (!flag) {
    //   Message.error('请完善配置信息')
    //   return false
    // }
    return true
  }
  // 设置需要创建的数据
  function setCreateData() {
    let params: any = {
      adjustFrequencyType: formInfo.value.adjustFrequencyType,
      budgetType: 'NULL_BUDGET',
      isPolicyCallback: formInfo.value.isPolicyCallback,
      policyTemplateTargetingRules: getRuleListToSave(),
    }
    return params
  }

  defineExpose({ validateData, setCreateData })
</script>
<style lang="less" scoped>
  .rules-list-w {
    .header {
      display: flex;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      line-height: 37px;
      background-color: var(--color-neutral-2);
    }
    .rules-con {
      .role-item {
        min-height: 48px;
        border-bottom: 1px solid var(--color-neutral-3);
      }
    }
  }
</style>
